<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待评价的订单-{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <!--公用css引用-->
    @include('front.common.style')

    <!--END/公用css引用-->
    <link rel="stylesheet" href="../dist/css/userCenter.css">

</head>
<body>

<!--公共头部-->
@include('front.common.header')

<!--END/公共头部-->

<div class="inbox user-center">
    <div class="layout-margin unend">
        <div class="sidebar-end"></div>
        <div class="sidebar-start">
        @include('front.common.leftnav')

        </div>
@inject('pictureService','App\Interfaces\PictureService')
@inject('commentService','App\Interfaces\CommentService')
        <!--主体部分-->
        <div class="container">
            <div class="container-inner u-order order-comment">
            @if($commentService->countMyOrderGoods($user->id) != 0)
                <div class="ui-brd-box1">
                    <div class="tit-2 tit-skin-2">
                        <span class="h">评价晒单</span>
                    </div>

                    <div class="order-list order-list-big">
                        <div class="table-head">
                            <div class="order-type">
                                <ul class="link-list link-list-skin2">
                                    <li class="cur"><a href="javascript:;">待评价商品（{{$commentService->countMyOrderGoods($user->id)}}）</a></li>
                                    <?php //dd($user->id);?>
                                </ul>
                            </div>
                        </div>
                        <table class="bl-table bl-table-tdLi table-tc">
                            <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th class="tl"><span class="fn-ml30">商品信息</span></th>
                                <th>评价状态</th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($commentService->getMyOrderGoods($user->id)  as $key=>$myOrderGoods)
                            <tr>
                                <td class="pic tl">
                                    <a href="/goods/{{$myOrderGoods->goods_id}}" target="_blank" title="{{$myOrderGoods->goods_name}}">
                                        <img class="head-img" src="{{$pictureService::thumb($myOrderGoods->goods_thumb, 400, 400)}}" alt="{{$myOrderGoods->goods_name}}">
                                    </a>
                                </td>
                                <td class="tl">
                                    <p class="name fn-mb10"><a class="link" href="/goods/{{$myOrderGoods->goods_id}}" target="_blank" title="{{$myOrderGoods->goods_name}}">{{$myOrderGoods->goods_name}}</a></p>
                                    <p class="text-color-7">{{$myOrderGoods->add_time}}</p>
                                </td>
                                <td>
                                    <a  class="fn-btn btn-def js-comment-btn" href="javascript:;">点击评价</a><br>
                                </td>
                            </tr>


                            <!--评论框-->
                            <tr class="fn-hide js-comment">
                                <td class="comment-wrap tl" colspan="3">
                                    <div class="bl-comment ">

                                        <div class="bl-tip-box tip-skin-def">
                                            <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
                                            <div class="bl-tip-con">
                                                {{--<form class="comment-form" action="" method="post" novalidate="novalidate">--}}
                                                {!! Form::model($user,['route'=>'my.comment.store','class'=>'js-form comment-form','novalidate'=>'novalidate'])  !!}
                                                    <ul>
                                                        <li class="item-group">
                                                            <div class="label">评分：</div>
                                                            <div class="input-wrap">
                                                                <div class="show-score">
                                                                    <div class="fn-dib bl-score" data-score="0">
                                                                        <span title="一般"><a class="score-icon"><i></i></a></span>
                                                                        <span title="不错"><a class="score-icon"><i></i></a></span>
                                                                        <span title="给力"><a class="score-icon"><i></i></a></span>
                                                                        <span title="推荐"><a class="score-icon"><i></i></a></span>
                                                                        <span title="非常棒"><a class="score-icon"><i></i></a></span>
                                                                    </div>
                                                                    <span class="score-tip"></span>
                                                                    <input type="hidden" name="CommentRating" value="1" class="rating-input">
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="item-group fn-mt14">
                                                            <div class="label fn-mt8">分享：</div>
                                                            <div class="input-wrap ui-brd-box1">


                                                                <div class="send-con">
                                                                    <input type="hidden" name="ObjectId" value="bbd318f1d5ab49319acc470fa6529826">
                                                                    <input type="hidden" name="order_goods_id" value="{{$myOrderGoods->id}}">
                                                                    <textarea name="CommentContent" class="send-text" placeholder="商品是否给力？快与大家分享一下吧~" maxlength="500" required data-msg-required="评价不能为空"></textarea>
                                                                </div>
                                                            </div>
                                                        </li>

                                                        <li class="item-group fn-mt20">
                                                            <div class="label fn-mt8">晒单：</div>
                                                            <div class="input-wrap image-uploader">
                                                                <ul class="J-thumBox bl-imgList fn-ohide"></ul>

                                                                <div class="message fn-hide text-color-error fn-mt6"></div>

                                                                <div class="bl-progress progress-xxs" >
                                                                    <div class="bl-progress-bar progress-bar-info" role="progressbar"></div>
                                                                </div>

                                                                <div class="upload-wrap">
                                                                    <input class="J-fileInput file-input" multiple type="file" name="file" data-url="/file_upload">
                                                                    <div class="J-fileupload img-upload-btn" title="上传图片">＋</div>
                                                                </div>
                                                            </div>
                                                        </li>

                                                        <li class="item-group fn-mt20">
                                                            <div class="label fn-vhide">提交：</div>
                                                            <div class="input-wrap">
                                                                <button type="submit" class="fn-btn btn-white btn-submit js-submit">发表评价</button>
                                                                <label class="fn-ml16"><input name="niming" type="checkbox">匿名评价</label>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                 {!! Form::close() !!}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <!--END/评论框-->
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--图片上传模板-->
                <ul id="thumTpl" class="fn-hide">
                    <li class="fn-rel img-box">
                        <img class="image" src="http://placehold.it/70x70"/>
                        <input class="J-thumb" name="image_url" type="hidden">
                        <a class="btn-del" role="button">×</a>
                    </li>
                </ul>

                <!--分页-->
                <!--  fn-tl/fn-tc/fn-tr 左中右定位; pager-big 大尺寸分页 可不加-->
                <div class="pager fn-tr">
                    <ul class="pagination">
                    {!! $commentService->getMyOrderGoods($user->id)->render() !!}
                    </ul>
                </div>
                <!--END/分页-->

            @else
                <!--无数据-->
                <div class="ui-brd-box1">
                    <div class="tit-2 tit-skin-2 fn-mb20">
                        <span class="h">评价晒单</span>
                    </div>

                    <div class="bl-nodata order-nodata">
                        <div class="nodata-text fn-dib">
                            <i class="icon icon-nodata icon-nodata-1"></i>
                            <p class="fn-mb0">您暂时没有待评价订单。</p>
                            <a href="/my/order">查看全部订单 &gt;</a>
                        </div>
                    </div>
                </div>
                <!--END/无数据-->
            @endif
            </div>

            <!--END/订单和收藏-->

        </div>
        <!--END/主体部分-->

    </div>
</div>


<!--END/物流 模板-->

<!--公共尾部-->
@include('front.common.footer')

<!--END/公共尾部-->

<!--公用js引用-->
@include('front.common.script')

<!--END/公用js引用-->

<script src="{{ asset ("/components/blueimp-file-upload/js/vendor/jquery.ui.widget.js") }}"></script>
<script src="{{ asset ("/components/blueimp-file-upload/js/jquery.iframe-transport.js") }}"></script>
<script src="{{ asset ("/components/blueimp-file-upload/js/jquery.fileupload.js") }}"></script>

<script src="{{ asset ("/dist/js/jquery.validation.js") }}"></script>
<script src="{{ asset ("/dist/js/userCenter.js") }}"></script>

<script>

    //图片上传
    $('.image-uploader').each(function(k,imageUploader){
        var wrapper = $(imageUploader);//盒子
        var thumBox=wrapper.find('.J-thumBox');//缩略图盒子
        var uploadBtn = wrapper.find('.J-fileInput');
        var progress = wrapper.find('.bl-progress');
        var progressBar = progress.find('.bl-progress-bar');
        var message = wrapper.find('.message');
        var index=0;

        uploadBtn.click(function(){
            progressBar.css('width', 0 + '%');
            message.hide();
        });
        wrapper.on('click','.btn-del',function(){
            progressBar.css('width', 0 + '%');
            $(this).closest('li').remove();
        });

        uploadBtn.fileupload({
            dataType: 'json',
            token:'{{csrf_token()}}',
            headers:{'X-CSRF-TOKEN':' {{csrf_token()}} '},
            limitConcurrentUploads:2,//并行上传数量

            add: function (e, data) {

                if(data.originalFiles.length>10){
                    message.text('最多上传10张图片').show();
                }else{
                    data.submit();
                }
            },
            progressall: function (e, data) {
                progress.fadeIn();
                var percent = parseInt(data.loaded / data.total * 100, 10);
                progressBar.css('width', percent + '%');
            },
            done: function (e, data) {
                addNew(data.result.url,data.result.id);

            },
            complete:function(){
                setTimeout(function () {
                    progress.fadeOut();
                }, 500);
            },
            fail: function (e, data) {

                message.html(data).show();
            }
        });

        function addNew(url,thumId){
            var newImg=$($('#thumTpl').html());
            newImg.find('.image').attr('src',url+'@!70-70');
            newImg.find('.J-thumb').val(thumId).attr('name','image_url['+index+']');
            index++;

            thumBox.append(newImg);
        }
    });

</script>

<script>
{{--$(".img-upload-btn").on('click',function(e){--}}
{{--e.preventDefault();--}}
    {{--var btn = $(this), goods_id = btn.data('id');--}}
    {{--$.ajax({--}}
    {{--url:"{{ URL('my/commentPicture') }}"+ "?t=" + Math.random(),--}}
    {{--data:{goods_id:goods_id},--}}
    {{--type:'post',--}}
    {{--dataType:'json',--}}
    {{--success:function(e){--}}

    {{--}--}}

    {{--});--}}
{{--});--}}

</script>
</body>
</html>